<template>
  <div class="app-container">
    <!-- 乡村纹理背景 -->
    <div class="bg-texture"></div>

    <el-row :gutter="20">
      <!-- 左侧个人信息及订单图表 -->
      <el-col :span="6" :xs="24" class="profile-col">
        <!-- 个人信息卡片 -->
        <el-card class="profile-card">
          <div slot="header" class="card-header">
            <i class="el-icon-leaf header-icon"></i>
            <span>个人信息</span>
          </div>

          <div class="avatar-wrapper">
            <userAvatar class="avatar" />
          </div>

          <ul class="info-list">
            <li class="info-item">
              <i class="el-icon-user info-icon"></i>
              <span class="label">用户名称</span>
              <span class="value">{{ user.userName }}</span>
            </li>
            <li class="info-item">
              <i class="el-icon-phone info-icon"></i>
              <span class="label">手机号码</span>
              <span class="value">{{ user.phonenumber || '未填写' }}</span>
            </li>
            <li class="info-item">
              <i class="el-icon-message info-icon"></i>
              <span class="label">用户邮箱</span>
              <span class="value">{{ user.email || '未填写' }}</span>
            </li>
            <li class="info-item">
              <i class="el-icon-calendar info-icon"></i>
              <span class="label">注册日期</span>
              <span class="value">{{ user.createTime | formatDate }}</span>
            </li>
          </ul>
        </el-card>

        <!-- 订单类型占比图表卡片 -->
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <i class="el-icon-shopping-basket chart-icon"></i>
            <span>我的订单类型占比</span>
          </div>
          <div class="chart-container">
            <div ref="orderChart" class="chart-wrapper"></div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧内容区域 -->
      <el-col :span="18" :xs="24" class="content-col">
        <el-card class="content-card">
          <div slot="header" class="content-header">
            <i class="el-icon-crop content-icon"></i>
            <span>乡村振兴·个人中心</span>
          </div>

          <el-tabs v-model="selectedTab" class="content-tabs">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
            <el-tab-pane label="我的订单" name="orders">
              <userOrders v-if="user.userId" :user-id="user.userId" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userAvatar from "./userAvatar.vue";
import userInfo from "./userInfo.vue";
import resetPwd from "./resetPwd.vue";
import { getUserProfile } from "@/api/system/user";
import userOrders from "./userOrders.vue";
import * as echarts from "echarts";
import { listOrder } from "@/api/system/order";

// 日期格式化过滤器
const formatDate = (dateStr) => {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
};

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd, userOrders },
  filters: { formatDate },
  data() {
    return {
      user: {},
      roleGroup: "",
      postGroup: "",
      selectedTab: "userinfo",
      orderChart: null, // 图表实例
      orderData: [] // 订单数据
    };
  },
  created() {
    const activeTab = this.$route.params?.activeTab;
    if (activeTab) this.selectedTab = activeTab;
    this.getUser();
  },
  mounted() {
    // 初始化图表
    this.initChart();
    // 监听窗口大小变化，重绘图表
    window.addEventListener("resize", this.handleResize);
  },
  beforeUnmount() {
    // 销毁图表实例
    if (this.orderChart) this.orderChart.dispose();
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
        // 获取用户订单数据
        this.getOrderData();
      });
    },

    // 获取用户订单数据
    getOrderData() {
      if (!this.user.userId) return;
      listOrder({ userId: this.user.userId }).then(response => {
        this.orderData = response.rows;
        // 更新图表
        this.updateChart();
      });
    },

    // 初始化图表
    initChart() {
      this.orderChart = echarts.init(this.$refs.orderChart);
    },

    // 更新图表数据
    updateChart() {
      if (!this.orderChart || this.orderData.length === 0) return;

      // 统计订单类型及数量
      const typeCount = {};
      this.orderData.forEach(order => {
        const type = order.productType || "其他";
        typeCount[type] = (typeCount[type] || 0) + 1;
      });

      // 处理图表数据
      const categories = Object.keys(typeCount);
      const values = categories.map(type => typeCount[type]);

      // 设置图表配置
      this.orderChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}单 ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: 20,
          textStyle: {
            fontSize: 12,
            color: "#6b7280"
          },
          formatter: function(name) {
            // 限制图例文字长度
            return name.length > 4 ? name.substring(0, 4) + "..." : name;
          }
        },
        series: [
          {
            name: "订单类型",
            type: "pie",
            radius: ["45%", "70%"],
            center: ["65%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 6,
              borderColor: "#fff",
              borderWidth: 2
            },
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: categories.map((type, index) => ({
              name: type,
              value: values[index]
            }))
          }
        ],
        // 乡村风格配色
        color: ["#4CAF50", "#8D6E63", "#FFC107", "#2196F3", "#E91E63", "#9C27B0"]
      });
    },

    // 窗口大小变化时重绘图表
    handleResize() {
      if (this.orderChart) {
        this.orderChart.resize();
      }
    }
  }
};
</script>

<style scoped lang="scss">
// 乡村风格主色调
$color-primary: #4CAF50; // 自然绿
$color-secondary: #8D6E63; // 木棕色
$color-bg: #F5F5F0; // 米白底色
$color-text: #333; // 文字色

.app-container {
  padding: 20px;
  background-color: $color-bg;
  min-height: 100vh;
  position: relative;

  // 麻布纹理背景
  .bg-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23a08e71' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    z-index: 0;
  }
}

// 左侧区域样式
.profile-col {
  display: flex;
  flex-direction: column;
  gap: 20px; // 卡片间距

  .profile-card {
    background-color: white;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
    z-index: 1;

    .card-header {
      background-color: $color-primary;
      color: white;
      padding: 12px 20px;
      font-size: 16px;
      display: flex;
      align-items: center;

      .header-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }

    .avatar-wrapper {
      padding: 20px 0;
      text-align: center;
      border-bottom: 1px dashed #e0e0e0;
    }

    .info-list {
      list-style: none;
      padding: 15px 20px;
      margin: 0;

      .info-item {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .info-icon {
          color: $color-primary;
          margin-right: 12px;
          width: 20px;
          text-align: center;
        }

        .label {
          color: $color-secondary;
          width: 80px;
          flex-shrink: 0;
          font-size: 14px;
        }

        .value {
          color: $color-text;
          flex-grow: 1;
          font-size: 14px;
          word-break: break-all;
        }
      }
    }
  }

  // 图表卡片样式
  .chart-card {
    background-color: white;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
    flex-shrink: 0;

    .chart-header {
      padding: 12px 20px;
      border-bottom: 1px solid #f5f5f5;
      font-size: 15px;
      color: $color-secondary;
      display: flex;
      align-items: center;

      .chart-icon {
        margin-right: 8px;
        color: $color-primary;
      }
    }

    .chart-container {
      padding: 15px 10px;

      .chart-wrapper {
        width: 100%;
        height: 240px; // 固定图表高度
      }
    }
  }
}

// 右侧内容区域
.content-col {
  .content-card {
    background-color: white;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;

    .content-header {
      padding: 12px 20px;
      border-bottom: 1px solid #f5f5f5;
      font-size: 16px;
      color: $color-secondary;
      display: flex;
      align-items: center;

      .content-icon {
        margin-right: 8px;
        color: $color-primary;
      }
    }

    .content-tabs {
      padding: 20px;

      :deep(.el-tabs__header) {
        margin-bottom: 20px;
        border-bottom: 1px solid #f5f5f5;

        .el-tabs__item {
          color: $color-secondary;
          font-size: 15px;
          padding: 0 20px;
          height: 40px;
          line-height: 40px;

          &.is-active {
            color: $color-primary;
            border-bottom: 2px solid $color-primary;
            font-weight: 500;
          }

          &:hover {
            color: $color-primary;
          }
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: 992px) {
  .profile-col {
    .chart-card .chart-wrapper {
      height: 220px;
    }
  }
}

@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }

  .profile-col {
    gap: 15px;

    .info-item {
      flex-wrap: wrap;

      .label {
        margin-bottom: 5px;
        width: 100%;
      }
    }

    .chart-card .chart-wrapper {
      height: 200px;
    }
  }
}
</style>
